<template>
  <div class="ai-analysis">
    <div class="step-one">
      <AIComponents />
    </div>
    <div class="step-two">
      <div class="all-title">学生智能体考核评分批阅列表</div>
      <div class="all-box">
        <div class="two-search">
          <div>时间段：</div>
          <el-date-picker
            v-model="form.startTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="开始时间"
          />
          -
          <el-date-picker
            v-model="form.endTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束时间"
          />
          <div class="all-btn" @click="search">搜索</div>
        </div>
        <div>
          <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="加载中..."
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="60"
              :index="calculateIndex"
            ></el-table-column>
            <el-table-column label="章节/考核知识点" show-overflow-tooltip>
              <template #default="scope">
                <div
                  v-if="scope.row.chapterNames.length > 0"
                  class="chapter-names"
                >
                  <div v-for="item in scope.row.chapterNames" :key="item">
                    {{ item }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="agentName" label="考核类型" />
            <el-table-column prop="cronTime" label="考核时间" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <div class="table-btns">
                  <div @click="handleDetail(scope.row)">详情</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
import AIComponents from "@/components/AIComponents.vue";
export default {
  components: {
    AIComponents,
  },
  data() {
    return {
      courseId: "",
      classId: "",
      active: 0,
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {
        startTime: "",
        endTime: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.classId = JSON.parse(localStorage.getItem("classId"));
    this.getList();
    // 监听班级变更事件
    eventBus.on("classChanged", this.handleClassChanged);
  },
  beforeUnmount() {
    // 清理事件监听器
    eventBus.off("classChanged", this.handleClassChanged);
  },
  methods: {
    // 计算表格序号
    calculateIndex(index) {
      return (this.form.page - 1) * this.form.limit + index + 1;
    },

    // 处理班级变更事件
    handleClassChanged(newClassId) {
      this.classId = newClassId;
      this.form.page = 1; // 重置页码
      this.getList(); // 重新获取数据
    },
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      // 只有当两个时间都有值时才进行比较
      if (
        this.form.startTime &&
        this.form.endTime &&
        new Date(this.form.startTime) > new Date(this.form.endTime)
      ) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
      console.log(currentPage, 333);
    },

    getList() {
      // 处理null值，转换为空字符串
      const startTime = this.form.startTime || "";
      const endTime = this.form.endTime || "";
      const url = `/tes/dify/agent/list?startTime=${startTime}&endTime=${endTime}&courseId=${this.courseId}&classId=${this.classId}&page=${this.form.page}&limit=${this.form.limit}`;
      this.loading = true;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          this.tableData = res.data.content;
          this.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleDetail(row) {
      console.log(row, 333);
      this.$router.push({
        path: "/aiTeaching/courseSystem/aiAnalysisDetail",
        query: { id: row.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ai-analysis {
  background-color: #f3f5fa;
  padding: 40px 30px;
  box-sizing: border-box;
  .step-one {
    margin-bottom: 62px;
  }
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px;
      :deep(.el-input__inner) {
        height: 38px;
      }
      .all-btn {
        height: 36px;
        line-height: 36px;
      }
    }
    .el-table {
      margin-bottom: 20px;
      .chapter-names {
        display: flex;
        gap: 10px;
      }
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        font-size: 14px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
}
</style>